<template>
  <div class="content-box">
    <div class="content-search">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="78px" class="demo-ruleForm" :inline="true">
        <div class="search-box">
          <el-form-item label="案件类型" prop="caseType" class="search-item">
            <el-select v-model="ruleForm.caseType">
              <el-option class="my-select-option" v-for="(item,i) in caseTypeList" :key="i+'type'" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="startDate" class="search-item">
              <el-date-picker
                v-model="ruleForm.startDate"
                type="date"
                placeholder="开始时间"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endDate" class="search-item">
              <el-date-picker
                v-model="ruleForm.endDate"
                type="date"
                placeholder="结束时间"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
          </el-form-item>
        </div>
        <div class="search-box">
          <el-form-item label="坐席人员" prop="seatUserId" class="search-item">
            <el-input v-model="ruleForm.seatUserId" placeholder="请输入坐席姓名或工号" clearable></el-input>
          </el-form-item>
          <el-form-item label="条件筛选" prop="caseNumber" class="search-item">
            <el-input v-model="ruleForm.caseNumber" placeholder="请输入报案号/车牌号/修理厂名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="案件状态" prop="taskStatus" class="search-item">
            <el-select v-model="ruleForm.taskStatus" >
              <el-option v-for="(item,i) in taskStatusList" :key="i+'status'" :label="item.label" :value="item.value" class="my-select-option"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="search-box">
          <el-form-item label="案件来源" prop="caseBirth" class="search-item">
            <el-select v-model="ruleForm.caseBirth" >
              <el-option v-for="(item,i) in caseBirthList" :key="i+'birth'" :label="item.label" :value="item.value" class="my-select-option"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组织机构" prop="organIds" class="search-item">
            <!-- <select-tree v-model="ruleForm.organIds" :data="treeData" :disabled="setting.disabled" :clearable="setting.clearable" :hide-on-selected="setting.hideOnSelected" :only-leaf="setting.onlyLeaf" :filterable="setting.filterable"></select-tree> -->
            <el-cascader
            v-model="ruleForm.organIds"
            :options="options"
            :props="{ checkStrictly: true }"
            :show-all-levels="false"
            clearable></el-cascader>
          </el-form-item>
          {{ ruleForm.organIds }}
        </div>
        <div class="search-btn-box">
          <el-form-item>
            <el-button @click="resetForm('ruleForm')" size="mini" class="reset-btn" round>重置</el-button>
            <el-button type="primary" @click="searchData()" size="mini" class="search-btn" round>搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="download-box">
        <el-button size="mini" round>下载excel</el-button>
        <el-button size="mini" round>批量下载图片</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      header-row-class-name="table-header"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="机构">
      </el-table-column>
      <el-table-column
        prop="name"
        label="坐席用户">
      </el-table-column>
      <el-table-column
        prop="address"
        label="报案号">
      </el-table-column>
      <el-table-column
        prop="address"
        label="车牌号">
      </el-table-column>
      <el-table-column
        prop="address"
        label="案件发起时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="渠道名称">
      </el-table-column>
      <el-table-column
        prop="address"
        label="估损金额">
      </el-table-column>
      <el-table-column
        prop="address"
        label="分配时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="案件类型">
      </el-table-column>
      <el-table-column
        prop="address"
        label="定损完成时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="定损类型">
      </el-table-column>
      <el-table-column
        prop="address"
        label="案件来源">
      </el-table-column>
      <el-table-column
        prop="address"
        label="核心案件状态">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详情">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
      popper-class="my-page-popper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
import SelectTree from './components/selectTree.vue';
export default {
  data() {
    return {
      loading: true,
      ruleForm: {
        caseType:'', // 案件类型
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        seatUserId:'', // 坐席人员
        caseNumber:'', // 条件筛选
        taskStatus:'', //案件状态
        caseBirth:'', //案件来源
        organIds:'' // 组织机构
      },
      pageSize: 10, // 每页条数
      total: 0, // 总条数
      currentPage: 1, // 当前页
      // 案件类型list
      caseTypeList:[
        {
          value:'',
          label:'全部'
        },
        {
          value:'0',
          label:'标的'
        },
        {
          value:'1',
          label:'三者'
        },
        {
          value:'2',
          label:'人伤'
        }
      ],
      // 案件状态list
      taskStatusList:[
        {
          value:'',
          label:'全部'
        },
        {
          value:'1',
          label:'正在处理'
        },
        {
          value:'2',
          label:'带增补'
        },
        {
          value:'3',
          label:'已完成'
        },
        {
          value:'4',
          label:'未完成'
        }
      ],
      // 案件来源list
      caseBirthList:[
        {
          value:'',
          label:'全部'
        },
        {
          value:'3',
          label:'待分配'
        },
        {
          value:'0',
          label:'自动分配'
        },
        {
          value:'1',
          label:'人工指派'
        },
        {
          value:'2',
          label:'修理厂指定'
        },
        {
          value:'4',
          label:'新版地域分配'
        }
      ],
      // 组织机构list
      treeData: [],
      options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }],
      // 树形组件设置
      setting: {
        disabled: false,
        clearable: false,
        hideOnSelected: true,
        filterable: false,
        onlyLeaf: true,
        text: '',
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      rules: {}
    }
  },
  components: {
    SelectTree
  },
  created() {
    this.ruleForm.startDate = dayjs(new Date()).format('YYYY-MM-DD')
    this.ruleForm.endDate = dayjs(new Date()).format('YYYY-MM-DD')
    this.getOrgList() // 查询组织机构
  },
  methods: {
    // 搜索数据
    searchData() {

    },
    // 重置搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 修改当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 获取组织机构树
    getOrgList(){
      let treedata = [
        { id: 22, name: "佛山", pid: 2 },
        { id: 2, name: "广州", pid: 0 },
        { id: 221, name: "无影脚", pid: 22 },
      ]
      this.treeData = this.list2Tree(treedata, { key: 'id', parent: 'pid', children: 'children' })
    },
    // 格式化组织机构树
    list2Tree(list, option = { key: 'id', parent: 'pid', children: 'children' }) {
      let tree = []
      // 获取父编码统一为函数
      let pvalue = typeof (option.parent) === 'function' ? option.parent : (n) => n[option.parent]
      // map存放所有对象
      let map = {}
      list.forEach(item => {
        map[item[option.key]] = item
      })
      //遍历设置根节点、父级节点
      list.forEach(item => {
        if (!pvalue(item))
          tree.push(item)
        else {
          map[pvalue(item)][option.children] ??= []
          map[pvalue(item)][option.children].push(item)
        }
      })
      return tree
    }
  },
}
</script>
<style lang="scss">
@import url('./caseList.scss');
</style>